<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-05-19 15:28:50
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-08-25 11:58:13
 * @FilePath: \code\ctp-static-portal-front\src\components\Bulletin\components\scroll.vue
 * @Description: 公告滚动
-->
<template>
  <div class="bulletin-scroll">
    <div class="bulletin-scroll-icon" :style="`color:${options.iconColor}`">
      <icon :icon="options.iconSettings" :size="26" />
    </div>

    <div :id="id" class="swiper-container" :class="{ isTwo }">
      <div class="swiper-wrapper">
        <div v-for="(items, index) in dataList" :key="index" class="swiper-slide">
          <!-- <template v-if="Array.isArray(items)"> -->
          <template>
            <a
              :style="`color:${options.txtColor}`"
              v-for="item in items"
              :key="item.id"
              :href="basePath + item.link"
              target="_blank"
              >{{ item.subject }}</a
            >
          </template>
        </div>
      </div>
    </div>
    <span @click="open()" :style="`color:${options.txtColor}`"
      >{{ sectionData.data.moreButton.label }}></span
    >
  </div>
</template>
<script>
  import { methods } from '@/utils';
  import swiper from '@/mixins/swiper';
  export default {
    name: 'BulletinScroll',
    mixins: [swiper],
    props: {
      list: {
        type: Array
      },
      options: {
        type: Object
      },
      sectionData: {
        type: Object
      }
    },
    data() {
      return {
        id: `swiper${this._uid}`,
        // dataList: [],
        basePath: `${_basePath}/`,
        moreUrl: window._basePath + '/entry/bulletin.html',
        isTwo: this.sectionData.data.resolveFunction === 'singleScrollTemplete'
      };
    },
    computed: {
      dataList() {
        const list = this.list ? this.list.slice(0, +this.options.count) : [];
        //一屏两个
        const dataList = [];
        while (list.length) {
          dataList.push(list.splice(0, 2));
        }
        return dataList;
      }
    },
    mounted() {
      this.setSwiper(
        new Swiper(`#${this.id}`, {
          autoplay: 5000,
          mode: 'vertical',
          loop: true, //可选选项，开启循环
          simulateTouch: false
        })
      );
    },
    methods: {
      open() {
        const moreUrl = `${this.moreUrl}?dataFile=${this.sectionData.dataFile}`;
        methods.open(moreUrl);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .bulletin-scroll {
    position: relative;
    height: 50px;
    overflow: hidden;

    > div {
      line-height: 50px;

      &.bulletin-scroll-icon {
        position: relative;
        float: left;
        width: 60px;
        height: 100%;
        text-align: center;

        &::after {
          position: absolute;
          top: 13px;
          right: 5px;
          display: block;
          width: 1px;
          height: 24px;
          background-color: rgba(0, 0, 0, 0.2);
          content: '';
        }

        > span {
          position: relative;
          top: 3px;
        }
      }

      &.swiper-container {
        height: 100%;
        margin-right: 56px;
        margin-left: 60px;

        .swiper-slide {
          float: none;

          > a {
            float: left;
            width: 50%;
            height: 50px;
            overflow: hidden;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        &.isTwo {
          .swiper-slide {
            > a {
              width: 50%;
            }
          }
        }
      }
    }

    > span {
      position: absolute;
      top: 0;
      right: 16px;
      display: block;
      width: 40px;
      height: 50px;
      font-size: 12px;
      line-height: 50px;
      cursor: pointer;
    }
  }
</style>
